<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'

// 主题系统
const { currentTheme } = useTheme()
</script>

<template>
  <footer class="footer footer-center p-10 bg-base-200 text-base-content">
    <div class="grid grid-flow-col gap-4">
      <router-link to="/" class="link link-hover">首页</router-link>
      <router-link to="/blog" class="link link-hover">博客</router-link>
      <router-link to="/about" class="link link-hover">关于</router-link>
    </div>

    <div class="grid grid-flow-col gap-4">
      <a href="#" class="link link-hover" title="GitHub">
        <PhGithubLogo class="w-6 h-6" />
      </a>
      <a href="#" class="link link-hover" title="Twitter">
        <PhTwitterLogo class="w-6 h-6" />
      </a>
      <a href="#" class="link link-hover" title="Email">
        <PhEnvelope class="w-6 h-6" />
      </a>
    </div>

    <div class="text-center">
      <p class="text-base-content/70">
        © 2024 我的博客. 使用
        <span class="text-primary font-semibold">{{ currentTheme.name }}</span> 主题
      </p>
      <p class="text-sm text-base-content/50 mt-1">
        {{ currentTheme.description }}
      </p>
    </div>
  </footer>
</template>

<style scoped>
/* 链接样式 */
.link-hover:hover {
  color: hsl(var(--p));
}
</style>
